<template>
  <div class="app-container">

    <!-- 代理商信息 agent   ,运营商信息 operator ---------- -->
    <div>
      <!--顶部按钮栏  -->
      <!-- <el-row :gutter="10" class="mb8" v-if="isRole == 'operator'">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="medium" @click="handleAdd">新增代理商
          </el-button>
        </el-col>
      </el-row> -->

      <el-row :gutter="10" class="mb8" v-if="isRole == 'agent'">
        <el-col :span="1.5">
          <!--  -->
          <el-button v-if="!formBank.bankCard" type="primary" plain icon="el-icon-plus" size="medium"
            @click="handleAddBank">新增代理商银行卡
          </el-button>
          <el-button v-if="formBank.bankCard" type="primary" plain icon="el-icon-plus" size="medium"
            @click="handleUpdateBank">修改代理商银行卡
          </el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table v-loading="loading" :data="roleList" :highlight-current-row="true">
        <el-table-column label="代理商姓名" align="center">
          <template slot-scope="scope">
            {{ scope.row.name ? scope.row.name : nulls }}
          </template>
        </el-table-column>
        <el-table-column label="代理商账号" align="center">
          <template slot-scope="scope">
            {{ scope.row.account ? scope.row.account : nulls }}
          </template>
        </el-table-column>
        <el-table-column label="代理商ID" prop="id" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="代理商密码" align="center">
          <template slot-scope="scope">
            {{ scope.row.password ? scope.row.password : nulls }}
          </template>
        </el-table-column>
        <el-table-column label="代理商电话" align="center">
          <template slot-scope="scope">
            {{ scope.row.phone ? scope.row.phone : nulls }}
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center">
          <template slot-scope="scope">
            {{ scope.row.contacts ? scope.row.contacts : nulls }}
          </template>
        </el-table-column>
        <el-table-column label="代理商地址" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            {{ scope.row.address ? scope.row.address : nulls }}
          </template>
        </el-table-column>
        <el-table-column label="银行卡号" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            {{ scope.row.bankCard ? scope.row.bankCard : nulls }}
          </template>
        </el-table-column>
        <el-table-column label="开户行地址" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            {{ scope.row.bankDeposit ? scope.row.bankDeposit : nulls }}
          </template>
        </el-table-column>
        <el-table-column label="银行卡名" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            {{ scope.row.bankName ? scope.row.bankName : nulls }}
          </template>
        </el-table-column>
        <el-table-column label="银行预留手机号" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            {{ scope.row.bankPhone ? scope.row.bankPhone : nulls }}
          </template>
        </el-table-column>

        <el-table-column label="总收益(元)" align="center">
          <template slot-scope="scope">
            {{ scope.row.totalRevenue ? scope.row.totalRevenue : 0 }}
          </template>
        </el-table-column>
        <el-table-column label="提现金额(元)" align="center">
          <template slot-scope="scope">
            {{ scope.row.withdrawMoney ? scope.row.withdrawMoney : 0 }}
          </template>
        </el-table-column>

        <el-table-column v-if="isRole == 'agent'" label="操作" align="center" class-name="small-padding fixed-width"
          width="190">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
            </el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">
              删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" />

      <!-- 代理商个人信息---添加或修改对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
          <el-form-item label="代理商姓名" prop="name">
            <el-input style=" width: 80%" v-model="form.name" placeholder="请输入代理商姓名" />
          </el-form-item>
          <el-form-item label="代理商账号" prop="account">
            <el-input style=" width: 80%" v-model="form.account" placeholder="请输入代理商账号" />
          </el-form-item>
          <el-form-item label="代理商ID" prop="id">
            <el-input style=" width: 80%" v-model="form.id" placeholder="请输入代理商ID" />
          </el-form-item>
          <el-form-item label="代理商密码" prop="password">
            <el-input style=" width: 80%" v-model="form.password" placeholder="请输入代理商密码" />
          </el-form-item>
          <el-form-item label="代理商电话" prop="phone">
            <el-input style=" width: 80%" v-model="form.phone" placeholder="请输入代理商电话" />
          </el-form-item>
          <el-form-item label="联系人" prop="contacts">
            <el-input style=" width: 80%" v-model="form.contacts" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item label="代理商地址" prop="address">
            <el-input style=" width: 80%" v-model="form.address" placeholder="请输入代理商地址" />
          </el-form-item>
          <el-form-item label="总收益(元)" prop="totalRevenue">
            <el-input style=" width: 80%" v-model="form.totalRevenue" placeholder="请输入总收益(元)" />
          </el-form-item>
          <el-form-item label="提现金额(元)" prop="withdrawMoney">
            <el-input style=" width: 80%" v-model="form.withdrawMoney" placeholder="请输入提现金额(元)" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 代理商银行卡信息----添加或修改对话框 -->
      <el-dialog :title="titleBank" :visible.sync="openBank" width="650px" append-to-body>
        <el-form ref="formBank" :model="formBank" :rules="rulesBank" label-width="150px">
          <el-form-item label="代理商ID" prop="id">
            <el-input style="width: 80%" type="text" min="1" v-model="formBank.id"></el-input>
          </el-form-item>
          <el-form-item label="银行名称" prop="bankName">
            <el-input style="width: 80%" type="text" min="1" v-model="formBank.bankName"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" prop="bankCard">
            <el-input style="width: 80%" type="text" min="1" v-model="formBank.bankCard"></el-input>
          </el-form-item>
          <el-form-item label="开户行" prop="bankDeposit">
            <el-input style="width: 80%" type="text" min="1" v-model="formBank.bankDeposit"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="bankPhone">
            <el-input style="width: 80%" type="text" min="1" v-model="formBank.bankPhone"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormBank">确 定</el-button>
          <el-button @click="cancelBank">取 消</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import { delRole, webAgentDel, addRole, updateRole } from '@/api/system/role'

export default {
  name: 'Role',
  data() {
    return {
      nulls: '--',
      // 遮罩层
      loading: false,

      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: '',
      titleBank: '',
      // 是否显示弹出层
      open: false,
      openBank: false,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
      // 个人信息----表单参数
      form: {},
      // 银行卡---表单参数
      formBank: {
        id: '',//代理商id
        bankName: '',//银行卡名称
        bankCard: '',//银行卡号
        bankDeposit: '',//开户行
        bankPhone: '',//手机号
      },
      isformBank: false,

      // 个人信息----表单校验
      rules: {
        account: [{ required: true, message: '代理商账号不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '代理商电话不能为空', trigger: 'blur' },
        { min: 11, max: 11, message: '手机号为11位数', trigger: 'blur' }
        ],
        address: [{ required: true, message: '代理商地址不能为空', trigger: 'blur' }]
      },
      // 银行卡信息----表单校验
      rulesBank: {
        id: [
          { required: true, message: "代理商ID不能为空", trigger: "blur" }
        ],
        bankName: [
          { required: true, message: "银行名称不能为空", trigger: "blur" }
        ],
        bankCard: [
          { required: true, message: "银行卡号不能为空", trigger: "blur" },
          { min: 16, max: 19, message: '银行卡号为16至19位数', trigger: 'blur' }
        ],
        bankDeposit: [
          { required: true, message: "开户行不能为空", trigger: "blur" }
        ],
        bankPhone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { min: 11, max: 11, message: '手机号为11位数', trigger: 'blur' }
        ],
      },
      isRole: '',

    }
  },
  async created() {
    this.isRole = sessionStorage.role

    await this.listFn()


  },
  methods: {
    // 表格基础信息
    async listFn() {
      if (this.isRole == 'agent') {
        let res = await this.apis.webAgent(sessionStorage.optUserId)
        this.roleList = [res.data]
        this.formBank.bankCard = this.roleList[0].bankCard || ''
      } else {
        let res = await this.apis.agentOperatora(sessionStorage.optUserId)
        this.roleList = res.rows
        this.total = res.total
      }
    },
    // 个人信息---取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 代理商银行卡信息---取消按钮
    cancelBank() {
      this.openBank = false
      this.resetBank()
    },

    // 表单重置
    reset() {
      (this.form = {
        name: undefined,
        account: undefined,
        id: undefined,
        password: undefined,
        phone: undefined,
        contacts: undefined,
        address: undefined,
        totalRevenue: undefined,
        withdrawMoney: undefined,
      })
    },
    // 表单重置
    resetBank() {
      (this.formBank = {
        id: sessionStorage.optUserId || '',
        bankName: '',
        bankCard: '',
        bankDeposit: '',
        bankPhone: '',
      })
    },
    /**个人信息---- 新增按钮操作 */
    async handleAdd() {
      this.reset()
      this.open = true
      this.title = '新增代理商个人信息'
    },


    /**个人信息--- 修改按钮操作 */
    handleUpdate(row) {
      this.form = row
      this.open = true
      this.title = '修改代理商个人信息'
    },

    /**银行卡信息---- 新增按钮操作 */
    async handleAddBank() {
      this.resetBank()
      this.isformBank = false
      this.openBank = true
      this.titleBank = '新增代理商银行卡信息'
    },


    /**银行卡信息--- 修改按钮操作 */
    handleUpdateBank() {
      this.isformBank = true
      this.formBank.id = sessionStorage.optUserId || ''
      this.formBank.bankName = this.roleList[0].bankName || ''
      this.formBank.bankCard = this.roleList[0].bankCard || ''
      this.formBank.bankDeposit = this.roleList[0].bankDeposit || ''
      this.formBank.bankPhone = this.roleList[0].bankPhone || ''
      this.openBank = true
      this.titleBank = '修改代理商银行卡信息'
    },

    /** 个人信息----新增、修改按钮的确认框 */
    submitForm: function () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.apis.webAgentUpdate(this.form).then((res) => {
            this.$message({
              message: "操作成功",
              type: "success",
            });
          }).catch((err) => {
          });

          setTimeout(() => {
            this.open = false
          }, 500)
          setTimeout(() => {
            this.listFn()
          }, 1000)
        }
      })
    },
    /** 代理商银行卡----新增、修改按钮的确认框 */
    submitFormBank() {
      this.$refs['formBank'].validate(valid => {
        if (valid) {
          if (this.isformBank) {
            this.apis.webAgentUpdateBank(this.formBank).then((res) => {
              this.$message({
                message: "操作成功",
                type: "success",
              });
            }).catch((err) => {
            });
          } else {
            this.apis.webAgentSaveBank(this.formBank).then((res) => {
              this.$message({
                message: "操作成功",
                type: "success",
              });
            }).catch((err) => {
            });
          }
          setTimeout(() => {
            this.openBank = false
          }, 500)

          setTimeout(() => {
            this.listFn()
          }, 1000)

        }
      })
    },

    /** 个人信息----删除按钮操作 */
    handleDelete(row) {
      console.log(222222, row);
      this.$confirm('是否确认删除' + row.name + ',(ID为：' + row.id + ')的个人基本信息？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function () {
          return webAgentDel(row.id),
            setTimeout(() => {
              history.go(0)
              this.listFn()
            }, 1000)
        })
        .then(() => {
          this.msgSuccess('删除成功')
        })
    },
  }
}
</script>
